<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Conectar a tu teléfono - App Inventor para Android
    </title>
    <link href="../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c3 {border-width:0}
    div.c2 {text-align: center;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../about/index.html"><img alt="" src="../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Apende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../learn/index.html">Aprende</a> &gt; <a href="../../learn/gettingstarted.html">Primeros pasos</a> &gt; <a href="../../learn/setup/index.html">Configuración</a> &gt; Conectar a tu teléfono &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Conecta App Inventor a tu teléfono
              </h1>
              <p>
                App Inventor se ejecuta a través de un navegador web. El teléfono se conecta al ordenador a través de un cable USB y tu aplicación aparecerá en el teléfono mientras trabajas en el navegador web. Cuando hayas terminado tu aplicación, puedes "empaquetarla" para producir un "paquete de instalación" (archivo APK de Android) que puedes compartir con todo el mundo e instalar en cualquier teléfono Android, igual que cualquier otra aplicación Android.
              </p>Antes de poder utilizar App Inventor, es necesario configurar el ordenador y el teléfono. Si alguien ya ha hecho esto por ti, puedes seguir mas abajo. De lo contrario, visita <a href="index.html">Configurando tu ordenador y tu teléfono para usar App Inventor</a> y luego regresa aquí.
              <h2>
                Crea un nuevo proyecto
              </h2>
              <p>
                Utiliza un navegador web para ir a <a href="http://appinventor.googlelabs.com">http://appinventor.googlelabs.com</a>. Debes ver una Página de proyectos vacía. Para crear un nuevo proyecto:
              </p>
              <ol>
                <li>Pulsa el botón <span class="ButtonText">Nuevo</span> en la parte superior izquierda de la página.
                </li>
                <li>Escribe un nombre de proyecto en el cuadro de diálogo que aparece y pulsa Aceptar.
                </li>
              </ol>
              <p>
                La página del navegador debe cambiar para parecerse a la figura de abajo. Este es el <span class="ButtonText">Diseñador</span>. de App Inventor. Aquí es donde vamos a crear las piezas de las aplicaciones - botones, etiquetas de texto, imágenes, y demás - arrastrándolas desde la columna de componentes de la izquierda hasta el visor en el centro.
              </p>
              <div class="c2">
                <img alt="" height="408" src="StartingAssets/designer.png" width="620">
              </div>
              <h2>
                Abre el Editor de bloques
              </h2>
              <p>
                El <span class="ButtonText">Diseñador</span> es una de las dos herramientas clave que utilizarás en la creación de tus aplicaciones. La otra es el Editor de bloques. Vamos a usar el Editor de bloques para asignar los comportamientos a los componentes como, que debe suceder cuando el usuario pulsa un botón. Para abrir el editor de bloques, haz clic en el botón <span class="ButtonText">Abrir el Editor de bloques</span> en la pantalla de diseño. Esto descargará la aplicación App Inventor Codeblocks e iniciará el Editor de bloques. El resultado será una nueva ventana, como la de la figura siguiente.
              </p>
              <div class="c2">
                <img alt="" height="356" src="StartingAssets/blockseditor.png" width="620">
              </div>
              <blockquote class="notice">
                <b>Consejos:</b>
                <ol>
                  <li>Puede tomar unos 30 segundos o menos el descargar e iniciar el Editor de bloques -- eso es normal. También tendrás que dar permiso para que la aplicación se ejecute.
                  </li>
                  <li>Dependiendo de cómo esté configurado tu navegador, podrás descargar la aplicación, pero puede que no se inicie automáticamente el editor de bloques, en cuyo caso tendrás que iniciar la aplicación manualmente tras la descarga.
                  </li>
                  <li>Cuando el editor de bloques se inicia, este intenta encontrar adb (Android Debug Bridge), el cual utiliza para conectarse al teléfono. Si App Inventor no puede encontrar el programa de forma automática, te pedirá que introduzcas la ubicación donde se almacena adb. Asegúrate de introducir la ruta y el nombre del archivo completo, incluyendo adb (en Mac o GNU/Linux) , y adb.exe (en Windows). Una vez que lo hayas introducido, App Inventor recordará la ubicación para futuras sesiones. Si cambias de ordenador, puede que tengas que indicar una nueva ubicación.
                  </li>
                  <li>App Inventor se confundirá si, en el paso anterior, introduces una ruta que existe en el equipo, pero en la que no está el programa adb - por ejemplo, si escribes sólo la ruta del directorio sin adb o adb.exe. App Inventor seguirá tratando de usar esta ruta "mala" para encontrar adb. Una forma de solucionar este problema es cambiar temporalmente el nombre del directorio o archivo en la ruta que has introducido, de manera que App Inventor no encuentre algo en ese camino. Eso hará que App Inventor olvide el mal camino que está utilizando. A continuación, puedes deshacer el cambio de nombre, reiniciar el Editor de bloques, e introducir el lugar correcto donde buscar.
                  </li>
                </ol>
              </blockquote>
              <h2>
                Conecta el teléfono a la computadora
              </h2>
              <p>
                Para terminar de conectar el teléfono al ordenador, pulsa el botón <span class="ButtonText">Conectar al Teléfono</span> en la parte superior del Editor de bloques. El texto debe cambiar a <span class="ButtonText">Conectando</span>, y cuando la conexión se complete el texto cambiará a <span class="ButtonText">Reiniciar la aplicación del teléfono</span>. El teléfono debe iniciar la AppInventor Phone Application, que se muestra en el teléfono como una pantalla en blanco con la palabra <span class="ButtonText">Screen1</span> en la parte superior, como se muestra aquí:
              </p>
              <div class="c2">
                <img alt="" height="402" src="StartingAssets/PhoneApp.png" width="300">
              </div>Más tarde, mientras estés trabajando, puedes utilizar el botón Reiniciar la aplicación del teléfono para reiniciar el teléfono si este se colgó. Además, si el teléfono se desconecta, el botón volverá de nuevo a Conectar al Teléfono como señal de que la conexión se ha roto. Puedes pulsar el botón para volver a conectar.
              <p>
                AAl final, todo está preparado. Ya estás listo para ir a <a href="../../learn/tutorials/index.html">los tutoriales</a> y trabajar en tu primera aplicación con App Inventor!
              </p>
              <blockquote class="notice">
                <b>Consejos:</b>
                <ol>
                  <li>Si la aplicación en el teléfono no se parece o actúa como se espera, intenta hacer clic en el botón Reiniciar la aplicación del teléfono para recargar el proyecto actual en el teléfono. Esta es una buena aproximación a la solución de problemas.
                  </li>
                  <li>Si App Inventor es incapaz de comunicarse con la aplicación en el teléfono, el texto del botón cambiará de nuevo a <span class="ButtonText">Conectar al Teléfono</span>
                  </li>
                  <li>Si desconectas el teléfono desde el ordenador o cierras la ventana del editor de bloques, tu aplicación desaparecerá del teléfono. No te preocupes, va a volver la próxima vez que conectes tu teléfono y hagas clic en el botón <span class="ButtonText">Conectar al Teléfono</span>.
                  </li>
                </ol>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c3" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google se ha modificado<br>
              El trabajo modificado se ha traducido del Ingles al Español<br>
              <a href="../../about/index.html">About</a> | <a href="../../about/privacy.html">Privacy</a> | <a href="../../about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

